<template>
  <div id="">
    <h2 v-title="'选择银行'"></h2>
    <ul class="bankcardList">
      <li>
        <div class="">
          <p>中国工商银行</p>
          <p>刘德华</p>
        </div>
        <div class="">
          <span class="bankNum">
            6222 0214 0200 9337 319
            <i></i>
          </span>
        </div>
      </li>
      <li>
        <div class="">
          <p>中国工商银行</p>
          <p>刘德华</p>
        </div>
        <div class="">
          <span class="bankNum">
            6222 0214 0200 9337 319
            <i></i>
          </span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "",
  data: () => ({

  })
}
</script>
<style lang="scss" scoped>
 
.bankcardList{
  padding: 20px;
  li{
    background: url('../../../../assets/images/VASA@2x.png') no-repeat;
    background-size: 100% 100%;
    border-radius: 6px;
    height: 10rem;
    @include flex;
    align-items: flex-start;
    flex-direction:column;
    justify-content: space-between;
    font-size: 16px;
    line-height: 2rem;
    margin-bottom: 20px;
    div{
      width: 92%;
      color:white;
      padding:4%;
    }
    .bankNum{
      text-align: justify;
      display: block;
      font-size: 1.6rem;
      font-weight: normal;
      line-height: normal;
      margin-bottom: -18px;
      i{
        display:inline-block;width:100%;height:0; line-height:0;
      }
    }
    .editImg{
      width: 20px;
      margin-right: 10px;
    }
    .deleteImg{
      width: 20px;
    }
  }
}
</style>
